﻿import * as React from "react"
import * as $ from 'jquery'
import 颜色 from '../../工具代码/颜色'
import R宽度占位符 from '../展示组件/宽度占位符'

export default class R菜单 extends React.Component<any, any> {
    constructor(props) {
        super(props)
        this.state = {
            正常样式: this.样式,
        }
    }
    前景色 = new 颜色(0, 160, 0)
    样式: React.CSSProperties = {
        position: 'absolute',
        left: '72',
        top: '73',
        width: '80px',
        padding: '1px',
        backgroundColor: 颜色.乘(this.前景色, 255).取值,
        boxShadow: '0 0 10px ' + 颜色.rgb(120,120,120).取值,
        border: 'solid 1px ' + 颜色.rgb(150, 150, 150).取值,
        color: 颜色.rgb(90, 90, 90).取值,
        WebkitAppRegion: 'no-drag',
        borderRadius: '0 5px 5px',
        zIndex: 11000
    }
    模态框样式: React.CSSProperties = {
        position: 'absolute',
        left: '0px',
        top: '0px',
        width: '100%',
        height: '100%',
        zIndex: 10100,
        WebkitAppRegion: 'no-drag'
    }

    render() {
        return (
            <div>
                <div style={this.模态框样式} onMouseDown={(e) => {
                    this.props.隐藏菜单()
                } }>
                </div>
                <div style={ this.state.正常样式 ? this.state.正常样式 : this.样式}
                    onClick={(e) => {
                        e.stopPropagation()
                        this.props.隐藏菜单()
                    } }>
                    {this.props.菜单数据.map((数据, 计数) =>
                        <R菜单项 {...数据}
                            key={计数}
                            />
                    ) }

                </div>
            </div>
        )
    }
}

export interface 菜单数据{
    图标样式?: string
    菜单名称?:string
}

class R菜单项 extends React.Component<any, any> {
    constructor(props) {
        super(props)
        this.state = { 正常样式: this.样式 }
    }
    前景色 = new 颜色(255, 255, 0)
    样式: React.CSSProperties = {
        backgroundColor: 颜色.乘(this.前景色, 255).取值,
        width: '100%',
        lineHeight: '24px',
    }

    经过样式: React.CSSProperties = {
        backgroundColor: 颜色.乘(this.前景色, 195).取值,
        color: 颜色.rgb(30, 30, 30).取值,
    }
    按下样式: React.CSSProperties = {
        backgroundColor: 颜色.乘(this.前景色, 175).取值,
        lineHeight: '26px',
        color: 颜色.rgb(0, 0, 0).取值,
    }
    图标样式: React.CSSProperties = {
        fontSize:'14px',
        lineHeight: '24px',
        color: new 颜色(255,130,0).取值
    }

    render() {
        return (
            <div className={this.props.菜单项类名} style={this.state.正常样式 ? this.state.正常样式 : this.样式}
                onMouseMove={(e) => {
                    e.stopPropagation()
                    this.setState({ 正常样式: $.extend({}, this.样式, this.经过样式) })
                } }
                onMouseOut={(e) => {
                    e.stopPropagation()
                    this.setState({ 正常样式: this.样式 })
                } }
                onMouseDown={() => {
                    this.setState({ 正常样式: $.extend({}, this.样式, this.按下样式) })
                } }
                onMouseUp={() => {
                    this.setState({ 正常样式: this.样式 })
                } }
                >
                <i style={this.图标样式} className={`iconfont ${this.props.图标样式}`}>
                </i>
                <R宽度占位符 宽度='10px'/>
                <span>{this.props.菜单名称}</span>
            </div>
        )
    }
}
